<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	   <style type="text/css">
	   	* {margin: 0;padding: 0;}
		li {list-style: none;}
		a {text-decoration: none;}
		input{/*input去掉选中后的蓝色外框线*/outline: none;}
		ul{display: flex;margin: 0 auto;}
		.main ul li{width:300px;height:260px;background: red;margin:10px;}
	   	@media only screen and (min-width:0px) and (max-width:670px){
	   		
	   	    ul{display: flex;margin: 0 auto;flex-wrap: wrap;align-content:center;width:340px;}
	   	    }
	   	@media only screen and (min-width:670px) and (max-width:980px){
	   	    ul{display: flex;margin: 0 auto;flex-wrap: wrap;align-content: space-between;width:640px;}
	   	    }
	   	@media only screen and (min-width:981px) and (max-width:1300px){
	   		ul{display: flex;margin: 0 auto;flex-wrap: wrap;align-content: space-between;width:960px;}
	   	}  
	   	@media only screen and (min-width:1301px){
	   		ul{display: flex;margin: 0 auto;flex-wrap: wrap;align-content: space-around;width:1300px;}	
	   	}
	   </style>
	</head>
	<body>
		<div class="main">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>
